<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐 - 歌单推荐</title>
    <link rel="stylesheet" href="index.css" />

  </head>
  <body>
    <!-- 顶部导航 -->
    <div class="container">
      <header>
        <img src="imgs/qqmusic.png" alt="QQ音乐" />
      </header>
    </div>

    <!-- 歌单推荐区域 -->
    <div class="container" id="recommend">
      <div class="header-inner">
        <h1>歌单推荐</h1>
      </div>

      <!-- 分类标签 -->
      <div class="operator">
        <span class="operator-item active" id="prefer"> 为你推荐 </span>
        <span class="operator-item" id="sport"> 运动 </span>
        <span class="operator-item" id="internet"> 网络歌曲 </span>
        <span class="operator-item" id="missing"> 思念 </span>
        <span class="operator-item" id="offcial"> 官方歌单 </span>
        <span class="operator-item" id="love"> 情歌 </span>
      </div>


      <!-- 歌单列表 -->
      <div class="playlist-container">
        <!-- 歌单卡片1 -->
        <div class="playlist-card">
          <div class="playlist-cover">
            <img src="" alt="歌单封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="playlist-title"></div>
          <div class="playlist-info"></div>
        </div>

        <!-- 歌单卡片2 -->
        <div class="playlist-card">
          <div class="playlist-cover">
            <img src="" alt="歌单封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="playlist-title"></div>
          <div class="playlist-info"></div>
        </div>

        <!-- 歌单卡片3 -->
        <div class="playlist-card">
          <div class="playlist-cover">
            <img src="" alt="歌单封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="playlist-title"></div>
          <div class="playlist-info"></div>
        </div>

        <!-- 歌单卡片4 -->
        <div class="playlist-card">
          <div class="playlist-cover">
            <img src="" alt="歌单封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="playlist-title"></div>
          <div class="playlist-info"></div>
        </div>

        <!-- 歌单卡片5 -->
        <div class="playlist-card">
          <div class="playlist-cover">
            <img src="" alt="歌单封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="playlist-title"></div>
          <div class="playlist-info"></div>
        </div>
    
    </div>
  </div>

    <!-- 新歌首发区域 -->
    <div class="container" id="new-songs">
      <h1>新歌首发</h1>
      <div class="section-header">
        <span class="play-all-btn">
          <img src="imgs/icon_play.png" alt="播放全部" />
          播放全部
        </span>
        
        <!-- 新歌分类 -->
        <span class="operator">
          <span class="operator-item active">推荐</span>
          <span class="operator-item">内地</span>
          <span class="operator-item">港台</span>
          <span class="operator-item">欧美</span>
          <span class="operator-item">韩国</span>
          <span class="operator-item">日本</span>
        </span>
      </div>
      
      <!-- 新歌列表  -->
      <div class="new-songs-list">
        <!-- 第一行 -->
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <!-- 第二行 -->
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <!-- 第三行 -->
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
        <div class="new-song-item">
          <div class="song-cover">
            <img src="" alt="歌曲封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="song-content">
            <div class="song-info">
              <div class="song-name"></div>
              <div class="song-artist"></div>
            </div>
          </div>
          <div class="song-time"></div>
        </div>
      </div>
    </div>

    <!-- MV区域 -->
    <div class="container" id="mv-section">
      <h1>MV</h1>
      <div class="section-header">
        <!-- MV分类 -->
        <span class="operator">
          <span class="operator-item active">推荐</span>
          <span class="operator-item">内地</span>
          <span class="operator-item">港台</span>
          <span class="operator-item">欧美</span>
          <span class="operator-item">韩国</span>
          <span class="operator-item">日本</span>
        </span>
      </div>
      
      <!-- MV卡片列表 -->
      <div class="mv-container">
        <!-- MV卡片1 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>
        
        <!-- MV卡片2 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>
        
        <!-- MV卡片3 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>
        
        <!-- MV卡片4 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>
        
        <!-- MV卡片5 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>
        
        <!-- MV卡片6 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>

        <!-- MV卡片7 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>


        <!-- MV卡片8 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>


        <!-- MV卡片9 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>

        <!-- MV卡片10 -->
        <div class="mv-card">
          <div class="mv-cover">
            <img src="" alt="MV封面">
            <div class="cover-mask">
              <img src="imgs/cover_play.png" class="cover-play" alt="播放">
            </div>
          </div>
          <div class="mv-title"></div>
          <div class="mv-info"></div>
        </div>
      </div>
    </div>

    <!-- 简单交互脚本 -->
    <script>
      // 给分类按钮添加点击切换效果
      const operatorItems = document.querySelectorAll(".operator-item");
      operatorItems.forEach((item) => {
        item.addEventListener("click", () => {
          // 移除所有按钮的active状态
          operatorItems.forEach((i) => i.classList.remove("active"));
          // 给当前点击的按钮添加active状态
          item.classList.add("active");
        });
      });

      // 从JSON文件导入数据并更新页面
      document.addEventListener("DOMContentLoaded", async function() {
        try {
          // 从task.json文件获取数据
          const response = await fetch('task.json');
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          const data = await response.json();
          
          console.log('成功加载JSON数据:', data);
          
          // 更新歌单数据
          updatePlaylistData(data.playlist);
          
          // 更新新歌数据
          updateSonglistData(data.songlist);
          
          // 更新MV数据
          updateMvlistData(data.mvlist);
          
        } catch (error) {
          console.error('加载JSON数据失败:', error);
          alert('数据加载失败，请刷新页面重试');
        }
      });

      // 更新歌单数据函数
      function updatePlaylistData(playlist) {
        console.log('开始更新歌单数据:', playlist);
        const playlistCards = document.querySelectorAll(".playlist-card");
        console.log('找到的歌单卡片数量:', playlistCards.length);
        
        playlistCards.forEach((card, index) => {
          if (playlist[index]) {
            console.log(`更新第${index}个歌单卡片`);
            
            // 更新封面图片
            const img = card.querySelector(".playlist-cover img");
            if (img) {
              console.log(`设置第${index}个图片src`);
              // 使用原始代码
              img.src = playlist[index].cover;
              // 添加图片加载失败处理
              img.onerror = function() {
                this.src = 'imgs/loading.png';
              };
            }
            
            // 更新标题
            const title = card.querySelector(".playlist-title");
            if (title) title.textContent = playlist[index].title;
            
            // 更新播放量，格式化数字
            const playCount = card.querySelector(".playlist-info");
            if (playCount) {
              const formattedCount = formatNumber(playlist[index].listen_num);
              playCount.textContent = `播放量：${formattedCount}`;
            }
          }
        });
      }

      // 更新新歌数据函数
      function updateSonglistData(songlist) {
        const songItems = document.querySelectorAll(".new-song-item");
        songItems.forEach((item, index) => {
          if (songlist[index]) {
            // 更新封面图片
            const img = item.querySelector("img");
            if (img) {
              img.src = songlist[index].cover;
              // 添加图片加载失败处理
              img.onerror = function() {
                this.src = 'imgs/loading.png';
              };
            }
            
            // 更新歌曲名称
            const songName = item.querySelector(".song-name");
            if (songName) songName.textContent = songlist[index].name;
            
            // 更新歌手信息
            const songArtist = item.querySelector(".song-artist");
            if (songArtist) {
              // 处理歌手数组
              const artistText = songlist[index].singer.join('、');
              songArtist.textContent = artistText;
            }
            
            // 更新歌曲时长
            const songTime = item.querySelector(".song-time");
            if (songTime) {
              const formattedTime = formatTime(songlist[index].interval);
              songTime.textContent = formattedTime;
            }
          }
        });
      }

      // 更新MV数据函数
      function updateMvlistData(mvlist) {
        const mvCards = document.querySelectorAll(".mv-card");
        mvCards.forEach((card, index) => {
          if (mvlist[index]) {
            // 更新封面图片
            const img = card.querySelector(".mv-cover img");
            if (img) {
              img.src = mvlist[index].cover;
              // 添加图片加载失败处理
              img.onerror = function() {
                this.src = 'imgs/loading.png';
              };
            }
            
            // 更新MV标题
            const title = card.querySelector(".mv-title");
            if (title) title.textContent = mvlist[index].title;
            
            // 更新MV信息（歌手和播放量）
            const info = card.querySelector(".mv-info");
            if (info) {
              const formattedCount = formatNumber(mvlist[index].listen_num);
              info.textContent = `${mvlist[index].singer} · ${formattedCount}次播放`;
            }
          }
        });
      }

      // 格式化数字（转换为万、亿单位）
      function formatNumber(num) {
        if (num >= 100000000) {
          return (num / 100000000).toFixed(1) + '亿';
        } else if (num >= 10000) {
          return (num / 10000).toFixed(1) + '万';
        }
        return num.toString();
      }

      // 格式化时间（秒转分:秒）
      function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
      }
    </script>
    
    <!-- 灰色页尾 -->
    <footer class="footer">
    </footer>
    
  </body>
</html>
